<template>
    <div class="newview">
        <!-- 图标 -->
        <div class="logo" @click="test1()">
        </div>
        <!-- 侧边栏 -->
        <div class="aside">
            <asiadview />
        </div>
        <!-- 底部图 -->
        <div class="musicimg"></div>
        <!-- 上导航 -->
        <div class="nav">
            <Search ref="search" />
        </div>
        <!-- 选歌界面 -->
        <div class="homeview">
            <!-- 自由点歌界面 -->
            <FreeMusic v-if="V1" />
            <!-- 随机点歌界面 -->
            <RandomSongs v-if="V2" />
            <!-- 播放列表界面 -->
            <MusicListPlayer v-if="V3"/>
            <!-- 本地上传音乐界面 -->
            <MusicSee v-if="V4"/>
        </div>
    </div>
</template>

<script>

// import Vue from 'vue';
import MusicListPlayer from '@/components/MusicListPlayer.vue';
import asiadview from '@/components/AsideView.vue';
import Search from '@/components/SearchView.vue';

import RandomSongs from '@/components/RandomSongs.vue';
import FreeMusic from '@/components/FreeMusic.vue';
import MusicSee from '@/components/MusicSee.vue';
import { data } from '@/play/data';
export default {
    name: 'NewView',
    data(){
        return data
    },
    components: {
        RandomSongs,
        asiadview,
        Search,
        FreeMusic,
        MusicListPlayer,
        MusicSee
    },methods:{
        test1:function(){
            console.log(this._data)
        },
    },
}

</script>

<style>
.newview {
    width: 1000px;
    height: 600px;
    border: 5px black solid;
    margin: auto;
    position: relative;
    box-shadow: 15px 15px 10px black;
    overflow: hidden;
}

.logo {
    /*border: 1px red solid;*/
    width: 20%;
    height: 100px;
    position: absolute;
    top: 0px;
    left: 0px;
    background-image: url(image/网易云图标.png);
    background-size: 41%;
    background-repeat: no-repeat;
    background-position: 45px 12px;
    background-color: rgb(84, 92, 100);
}

.aside {
    /*border: 1px red solid;*/
    width: 20%;
    height: 238px;
    position: absolute;
    top: 100px;
    left: 0px;
    background-color: "#909399";
}

.musicimg {
    /*border: 1px red solid;*/
    width: 20%;
    height: 266px;
    position: absolute;
    top: 324px;
    left: -1px;
    background-color: rgb(84, 92, 100);
    background-image: url(image/底部图片.png),url(image/音乐标志4.png);
    background-size: 155px,165px 209px;
    background-repeat: no-repeat;
    background-position: 78px -15px,2px 20px;
}

.nav {
    /*border: 1px red solid;*/
    width: 80%;
    height: 100px;
    position: absolute;
    top: 0px;
    left: 198px;
    background-color: rgb(84, 92, 100);
}

.homeview {
    /*border: 1px red solid;*/
    width: 81%;
    height: 495px;
    position: absolute;
    top: 100px;
    left: 197px;
    background-image: url(image/bg1.jpg);
    background-size: 100%;
}

.aserch {
    margin: auto;

}
</style>